<!--商家管理-分区管理-->
<template>
  <div class="video-list-manage-parent" ref="parentContainer">
    <!--操作表单区域-->
    <div class="option-parent" ref="optionParentContainer">
      <el-row :gutter="0">
        <el-col :span="6">
          <el-button type="primary" @click="showAddOper()">添加</el-button>
        </el-col>
      </el-row>
    </div>

    <!--数据表格区域-->
    <div v-bind:style="{height:tableHeight+'px',width:'100%'}" v-loading="loading">
      <el-table :data="agentPartitionData.agent_operator_list" border width="100%" height="100%">
        <el-table-column
          prop="userid"
          label="操作员ID"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="supermobile"
          label="手机号"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="supername"
          label="姓名"
          min-width="150">
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="showEditOper(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              @click="deleteTypes(scope.row)">删除
            </el-button>
            <el-button
              size="mini"
              @click="setOperAuth(scope.row)">设置权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--翻页区域-->
    <div class="pagination-parent" ref="paginationParentContainer">
    </div>

    <!--新增操作员-->
    <el-dialog :title="dialogTitle" :visible.sync="isShowAddDialog">
      <el-form :model="form">
        <el-form-item label="操作员姓名" label-width="60">
          <el-input v-model="form.supername" :disabled="canEdit"></el-input>
        </el-form-item>
        <el-form-item label="操作员手机号" label-width="60">
          <el-input v-model="form.supermobile" :disabled="canEdit"></el-input>
        </el-form-item>
        <el-form-item label="登陆密码" label-width="60">
          <el-input v-model="form.operpass"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="requestAddOrModifyTypes()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import CPageBase from "../fragment/CPageBase"
  import CRootBase from "../fragment/CRootBase"
  import md5 from "js-md5"

  export default {
    data() {
      return {
        pathArr: [
          {path: "/", name: "首页"},
          {path: "/container/seller_partition", name: "分区管理"},
        ],
        category: "",
        loading: false,
        agentPartitionData: "",//代理商的商户数据
        isShowAddDialog: false,
        form: {
          userid: "",
          supername: "",
          supermobile: "",
          operpass: ""
        },
        dialogTitle: "新增操作员",
        canEdit: true
      }
    },
    mixins: [CPageBase, CRootBase],
    components: {},
    mounted() {

    },
    activated() {
      this.initCurrentPath();
      this.requestAgentPartiong()
    },
    methods: {
      //初始化面包屑路径
      initCurrentPath() {
        this.$store.commit('changeCurrentLocation', this.pathArr);
      },

      //打开权限设置页面
      setOperAuth(item) {
        this.$router.push({path: 'sys_operator_auth', query: item});
      },

      //显示新增操作员对话框
      showAddOper() {
        this.canEdit = false;
        this.dialogTitle = "新增操作员";
        this.form.userid = "";
        this.form.supername = "";
        this.form.supermobile = "";
        this.form.operpass = "";
        this.isShowAddDialog = true;
      },

      //显示编辑对话框
      showEditOper(item) {
        this.canEdit = true;
        this.dialogTitle = "编辑操作员";
        this.form.userid = item.userid;
        this.form.supername = item.supername;
        this.form.supermobile = item.supermobile;
        this.isShowAddDialog = true;
      },

      //新增或编辑操作员
      requestAddOrModifyTypes() {
        if (this.$utils.isEmpty(this.form.supername)) {
          this.$message({message: '姓名未输入！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.supermobile)) {
          this.$message({message: '手机号未输入！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.operpass)) {
          this.$message({message: '登陆密码未输入！', type: 'warning'});
          return;
        }
        this.isShowAddDialog = false;
        let that = this;
        let parameter = new URLSearchParams();
        if (this.$utils.isEmpty(this.form.userid)) {
          parameter.append("action", "agent_operator_create");
        } else {
          parameter.append("action", "agent_operator_modify");
          parameter.append("operid", this.form.userid);
        }
        parameter.append("opername", this.form.supername);
        parameter.append("opermobile", this.form.supermobile);
        parameter.append("operpass", md5(this.form.operpass));
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.$message({type: 'success', message: '操作成功!'});
          that.form.userid = "";
          that.form.supername = "";
          that.form.supermobile = "";
          that.form.operpass = "";
          that.requestAgentPartiong();
        });
      },

      //删除操作员
      deleteTypes(item) {
        let that = this;
        this.$confirm('此操作将永久删除该操作员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parameter = new URLSearchParams();
          parameter.append("action", "agent_operator_delete");
          parameter.append("opermobile", item.supermobile);
          that.loading = true;
          this.$http.requestAuthData(that, parameter, function (data) {
            that.$message({type: 'success', message: '删除成功!'});
            that.requestAgentPartiong();
          });
        });
      },

      // 请求操作员列表
      requestAgentPartiong() {
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_operator_list");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.agentPartitionData = data;
        });
      }
    }
  }
</script>

<style lang="scss" scoped="" type="text/scss" src="../../assets/style/list-type-pages.scss">
</style>

